<template>
  <uni-popup
    ref="popup"
    class="alert-dialog"
    type="dialog"
    animation
    :mask-click="false"
    mask-background-color="rgba(0, 0, 0, .8)"
    @change="$emit('change', $event.show)"
  >
    <view class="alert-dialog-container">
      <view class="title">{{ title }}</view>
      <slot>
        <view class="content">{{ content }}</view>
      </slot>
      <view class="bottom">
        <!--    background-image: url('https://www.dingxians.cn/upload/images/common/btn-primary-small.png');    -->
        <view v-if="showCancel" class="cancel btn btn-primary" :class="{fill: showCancel && !showConfirm}" @click="cancel">{{ cancelString }}</view>
        <view v-if="showConfirm" class="confirm btn btn-primary" :class="{fill: showConfirm && !showCancel}" @click="confirm">{{ confirmString }}</view>
      </view>

      <image @click="cancel" class="close-btn" src="https://www.dingxians.cn/upload/images/shop/close-btn.png"></image>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'my-alert-dialog',
  props: {
    title: String,
    content: String,
    cancelString: {
      type: String,
      default: '取消',
    },
    confirmString: {
      type: String,
      default: '确定',
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    type: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      args: {},
    }
  },
  computed: {
    btnBg() {
      const url = this.type === 1 ? "url('https://www.dingxians.cn/upload/images/common/btn-primary-small.png')"
        : "url('https://www.dingxians.cn/upload/images/welfare/btn-join.png')"
      return {backgroundImage: url}
    }
  },
  methods: {
    cancel() {
      this.$refs.popup.close()
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('confirm', this.args)
      this.$refs.popup.close()
    },
    show(args) {
      this.args = args
      // console.log(this.$refs)
      this.$refs.popup.open("bottom")
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    // console.log(this.$refs.popup)
    /* this.$refs.popup.open() */
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
}
</script>

<style scoped lang="scss">
.alert-dialog {
  .alert-dialog-container {
    z-index: 999;
    width: 750rpx;
    min-height: 400rpx;
    background-color: #030522;
    color: white;
    text-align: center;
    padding: 80rpx 40rpx 60rpx;
    box-sizing: border-box;
    position: relative;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }

    .content {
      margin: 50rpx 0 80rpx;
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .btn {
        width: 276rpx;
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
        font-weight: bold;

        &.fill {
          width: 100%;
        }
      }

      .cancel {
        filter: grayscale(1);
      }
    }
  }

  .close-btn {
    position: absolute;
    right: 50rpx;
    top: 50rpx;
    width: 36rpx;
    height: 36rpx;
  }
}
</style>
